import { Component, input, output } from "@angular/core";
import { type Hero } from "../interface/hero";

@Component({
  selector: "ng2-heroes",
  // This template uses the upgraded `ng1-hero` component
  // Note that because its element is compiled by Angular we must use camelCased attribute names
  template: `
    <header>
      <ng-content selector="h1"></ng-content>
    </header>
    <ng-content selector=".extra"></ng-content>
    @for (hero of heroes(); track hero.name) {
      <ng1-hero [hero]="hero" (onRemove)="removeHero.emit(hero)"
        ><strong>Super Hero</strong></ng1-hero
      >
    }
    <button class="btn" (click)="addHero.emit()">Add Hero</button>
  `,
  standalone: false,
})
export class Ng2HeroesComponent {
  heroes = input<Hero[]>([]);

  addHero = output<void>();

  removeHero = output<Hero>();
}
